<!--
 * @Description:
 * @Author: charles
 * @Date: 2021-10-19 20:57:16
 * @LastEditors: charles
 * @LastEditTime: 2021-10-21 17:21:35
-->
<template>
  <div ref="root" />
</template>
<script>
import { Bar } from '@antv/g2plot'
import { get } from '@/utils/request'
export default {
  data() {
    return {
      plot: null,
      data: []
    }
  },
  async mounted() {
    await this.loadOrderStatus()
    this.initChart()
  },
  beforeDestroy() {
    if (this.plot) {
      this.plot.destroy()
    }
  },
  methods: {
    async loadOrderStatus() {
      const url = '/statistics/orderStatus'
      const resp = await get(url)
      for (const key in resp.data) {
        const val = resp.data[key]
        const item = { year: key, value: val }
        this.data.push(item)
      }
    },
    initChart() {
      const data = this.data
      const container = this.$refs.root
      container.style.height = '180px'
      this.plot = new Bar(container, {
        data,
        xField: 'value',
        yField: 'year',
        seriesField: 'year',
        legend: { position: 'bottom' }
      })

      this.plot.render()
    }
  }
}
</script>
